<route lang="json5" type="page">
{
  style: {
    navigationBarTitleText: '智能选岗搜索',
    navigationStyle: 'custom',
  },
}
</route>
<template>
  <view class="smart-job-selection">
    <view class="fixed-bg"> </view>
    <view class="smart-job-selection__container">
      <image
        :class="[searchType === 1 ? 'h-[310rpx]' : 'h-[322rpx]']"
        :src="tabs[searchType].img"
        mode="scaleToFill"
      />
      <image
        class="h-[110rpx]"
        src="@/pages-sub/static/smartJobSelection/vip-btn.png"
        mode="scaleToFill"
        v-if="!userInfo.isMember"
        @click="toVIP"
      />
      <view class="smart-job-selection__container__main">
        <view class="smart-job-selection__container__main--tab">
          <view
            v-for="(item, index) in tabs"
            :key="index"
            :class="{ active: searchType === item.value }"
            @click="searchType = item.value"
          >
            {{ item.title }}
          </view>
        </view>
        <view class="main">
          <view class="main__hot" v-if="searchType === 1">
            <image src="@/pages-sub/static/smartJobSelection/hot.png" mode="scaleToFill" />
            累积 <text>{{ currentReportCount }}</text> 热招岗位
          </view>
          <view class="main__desc">
            {{ tabs[searchType].desc }}
          </view>
          <!-- 专业 -->
          <template v-if="searchType === 1">
            <wd-cell custom-class="custom-cell">
              <template #title>
                <text class="mr-1">专业</text>
                <wd-icon
                  name="help-circle-filled"
                  size="32rpx"
                  color="#B5B8BC"
                  @click="tipPopupRef.open()"
                ></wd-icon>
              </template>
              <!-- <wd-input
                v-model="jobQueryParams.majorName"
                no-border
                placeholder="请输入专业大类、学科、专业或不限"
              /> -->
              <view
                @click="majorSelectPopupRef.open()"
                :style="{ color: jobQueryParams.majorName ? '#333' : '#B5B8BC' }"
              >
                {{ jobQueryParams.majorName || '请选择' }}
                <wd-icon name="arrow-right" size="32rpx" color="#B5B8BC"></wd-icon>
              </view>
            </wd-cell>
            <wd-cell custom-class="custom-cell mt-2">
              <template #title>
                <text class="mr-1">是否搜索不限专业岗位</text>
                <wd-icon
                  name="help-circle-filled"
                  size="32rpx"
                  color="#B5B8BC"
                  @click="gwTipPopupRef.open()"
                ></wd-icon>
              </template>
              <wd-switch v-model="jobQueryParams.isNoLimit" active-color="#FF800E" size="large" />
            </wd-cell>
            <wd-cell custom-class="custom-cell mt-2" title="学历">
              <view @click="educationSelectPopupRef.open()">
                {{ jobQueryParams.minEducation }}
                <wd-icon name="arrow-right" size="32rpx" color="#B5B8BC"></wd-icon>
              </view>
            </wd-cell>
          </template>
          <!-- 公司 -->
          <template v-else>
            <wd-cell custom-class="custom-cell">
              <template #title>
                <text class="mr-1">意向公司</text>
                <!-- <wd-icon name="help-circle-filled" size="32rpx" color="#B5B8BC"></wd-icon> -->
              </template>
              <wd-input
                v-model="companyParams.name"
                no-border
                placeholder="请输入您的意向公司名称"
              />
            </wd-cell>
            <wd-cell custom-class="custom-cell mt-2" title="岗位状态">
              <view @click="positionStatusSelectPopupRef.open()">
                {{ companyParams.positionStatusLabel }}
                <wd-icon name="arrow-right" size="32rpx" color="#B5B8BC"></wd-icon>
              </view>
            </wd-cell>
          </template>

          <view class="main__rest flex justify-between">
            <view v-if="!userInfo.isMember">
              <text style="color: #f14444">*</text>
              剩余
              <text class="num">{{ userInfo.searchNum || 0 }}</text>
              次查询机会
            </view>
            <text @click="toPage('userGuide')">使用指南</text>
          </view>
          <c-button block custom-class="w-full" @click="handleSearch">
            {{ tabs[searchType].btnText }}
          </c-button>
        </view>
      </view>
    </view>

    <c-tip-popup ref="tipPopupRef">
      1、输入您所学专业的大类、学科、小类或专业名称等关键字，根据您的输入内容搜索匹配的岗位信息。<br />
      2、输入“不限”，搜索不限专业的岗位信息。
    </c-tip-popup>
    <c-tip-popup ref="gwTipPopupRef"> 选择后，会匹配学历要求为“不限”的岗位信息 </c-tip-popup>
    <!-- 学历 -->
    <c-select-picker
      :showInput="false"
      :options="educationOptions"
      ref="educationSelectPopupRef"
      @confirm="selectEducation"
    />
    <!-- 岗位状态 -->
    <c-select-picker
      :showInput="false"
      :options="positionStatusOptions"
      ref="positionStatusSelectPopupRef"
      @confirm="selectPositionStatus"
    />
    <MajorSelectPopup ref="majorSelectPopupRef" @confirm="(e) => (jobQueryParams.majorName = e)" />
  </view>
</template>

<script lang="ts" setup>
  import gscxImg from '@/pages-sub/static/smartJobSelection/gscx.png'; //公司查询
  import gwpp from '@/pages-sub/static/smartJobSelection/gwpp.png'; // 岗位匹配
  import { navigateTo } from '@/utils/router';
  import { ApiGetDictData } from '@/service/common';
  import { DictType } from '@/service/app/types';
  import { useUserStore } from '@/store/user';
  import { storeToRefs } from 'pinia';
  import { ref } from 'vue';
  import { ApiHomeCurrentReportCount } from '@/service/index';
  import MajorSelectPopup from '@/pages-sub/components/majorSelectPopup.vue';

  const userStore = useUserStore();
  const { userInfo } = storeToRefs(userStore);
  const searchType = ref(1);
  const tabs = {
    1: {
      title: '岗位匹配',
      value: 1,
      img: gwpp,
      desc: '请填写岗位匹配信息',
      btnText: '一键匹配',
    },
    2: {
      title: '公司查询',
      value: 2,
      img: gscxImg,
      desc: '根据公司名称查询岗位数据',
      btnText: '检索企业职位',
    },
  };

  const tipPopupRef = ref();
  const gwTipPopupRef = ref();
  const majorSelectPopupRef = ref();
  const educationSelectPopupRef = ref();
  const positionStatusSelectPopupRef = ref();
  const educationOptions = ref<Array<DictType>>([]);
  const currentReportCount = ref(0);
  const positionStatusOptions = ref<Array<DictType>>([]);
  const jobQueryParams = ref({
    majorName: '',
    minEducation: '不限',
    isNoLimit: false,
  });
  const companyParams = ref({
    name: '',
    positionStatus: '不限',
    positionStatusLabel: '不限',
  });
  const toVIP = () => {
    navigateTo('/pages-sub/vip/index');
  };

  const toPage = (url: string, params?: Object | null) => {
    navigateTo(`/pages-sub/smartJobSelection/${url}`, params);
  };
  const handleSearch = () => {
    if (userInfo.value.isMember) {
      return toSearch();
    }
    if (userInfo.value.searchNum == 0) {
      return uni.showModal({
        title: '体验次数已用完',
        content: '成为会员，享受无限次查询岗位特权',
        showCancel: true,
        confirmText: '开通会员',
        cancelText: '放弃',
        success: ({ confirm, cancel }) => {
          if (confirm) {
            toVIP();
          }
        },
      });
    }
    uni.showModal({
      title: '温馨提示',
      content: '请确认是否使用体验次数进行搜索，确认后会扣除您的1次搜索体验次数',
      showCancel: true,
      success: ({ confirm, cancel }) => {
        if (confirm) {
          toSearch();
        }
      },
    });
  };
  const toSearch = () => {
    if (searchType.value == 1) {
      toPage('jobSearch', {
        majorName:
          jobQueryParams.value.majorName == '不限' || jobQueryParams.value.isNoLimit
            ? ''
            : jobQueryParams.value.majorName,
        minEducation:
          jobQueryParams.value.minEducation == '不限' ? '' : jobQueryParams.value.minEducation,
      });
    } else {
      toPage('companySearch', {
        name: companyParams.value.name,
        positionStatus:
          companyParams.value.positionStatus == '不限' ? '' : companyParams.value.positionStatus,
      });
    }
  };

  ApiGetDictData('educational_background').then((res) => {
    educationOptions.value = [
      { label: '不限', value: '不限' },
      ...(res.data as Array<DictType>).map((item) => ({ label: item.label, value: item.label })),
    ];
  });
  ApiGetDictData('position_status').then((res) => {
    positionStatusOptions.value = [
      { label: '不限', value: '不限' },
      ...(res.data as Array<DictType>),
    ];
  });
  const selectEducation = (value) => {
    jobQueryParams.value.minEducation = value;
  };
  const selectPositionStatus = (value, label) => {
    companyParams.value.positionStatus = value;
    companyParams.value.positionStatusLabel = label[0];
  };

  onShow(() => {
    ApiHomeCurrentReportCount().then(({ data }) => {
      currentReportCount.value = (data as number) || 0;
    });
  });
</script>

<style lang="scss" scoped>
  .smart-job-selection {
    .fixed-bg {
      background: linear-gradient(180deg, #ffdbc6 0%, #fbe1d1 27%, #fff3ec 100%);
    }
    &__container {
      &__banner {
        width: 100%;
      }

      &__main {
        margin-top: 40rpx;
        background: #fff;
        border-radius: 20rpx;
        margin: 0 32rpx;
        &--tab {
          display: flex;
          view {
            flex: 1 0 0;
            text-align: center;
            background: #fef7f2;
            border-radius: 20rpx 20rpx 0rpx 0rpx;
            color: $uni-color-subtitle;
            font-size: 28rpx;
            padding: 28rpx 0;
            &:first-child {
              border-top-right-radius: 0rpx;
              border-bottom-right-radius: 30rpx;
            }
            &:last-child {
              border-top-left-radius: 0rpx;
              border-bottom-left-radius: 30rpx;
            }
            &.active {
              background: #fff;
              border-radius: 20rpx;
              position: relative;
              top: -10rpx;
              color: $uni-color-primary;
              font-size: 30rpx;
              font-weight: 600;
              box-shadow: 0rpx -7rpx -8rpx 10rpx rgba(112, 49, 23, 0.12);

              &::after {
                content: '';
                position: absolute;
                bottom: 0;
                left: 50%;
                transform: translateX(-50%);
                width: 40rpx;
                height: 6rpx;
                background: $uni-color-primary;
              }
            }
          }
        }

        .main {
          padding: 32rpx;
          &__hot {
            display: flex;
            align-items: center;
            gap: 8rpx;
            color: #3e4654;
            font-size: 30rpx;
            background: linear-gradient(
              270deg,
              rgba(255, 128, 14, 0) 0%,
              rgba(255, 128, 14, 0.16) 100%
            );
            border-radius: 8rpx 0rpx 0rpx 8rpx;
            padding: 16rpx 20rpx;
            margin-bottom: 32rpx;
            image {
              width: 30rpx;
              height: 30rpx;
            }
            text {
              color: $uni-color-primary;
              font-family: D-DIN, D-DIN;
              font-weight: bold;
              font-size: 38rpx;
            }
          }
          &__desc {
            font-weight: 600;
            font-size: 36rpx;
            color: $uni-color-title;
            margin-bottom: 32rpx;
          }

          &__rest {
            color: $uni-color-subtitle;
            margin: 32rpx 0 40rpx;
            font-size: 28rpx;
            padding-left: 10rpx;
            .num {
              color: $uni-color-primary;
              font-weight: 600;
            }
          }
        }
      }
    }
  }
  :deep() {
    .custom-cell {
      justify-content: space-between !important;
      background: rgba(62, 70, 84, 0.05) !important;
      border-radius: 20rpx;
      .wd-cell__wrapper {
        align-items: center;
      }
      .wd-cell__left {
        flex: none;
        width: fit-content;
      }
      .wd-cell__right {
        width: 80%;
        .wd-input {
          background: transparent;
          &__inner {
            text-align: right;
          }
        }
      }
    }
  }
</style>
